<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="mb-10">
          <el-button type="primary" @click="showDetailFn('')" size="small"><i class="el-icon-plus"></i>新增带量食谱
          </el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <el-table-column
          align="center"
          prop="id"
          label="校周">
          <template slot-scope="scope">
            <span v-if="scope.row.week">
              {{ scope.row.week }}周
            </span>
            <span v-else>
              未知
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="图片">
          <template slot-scope="scope">
            <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.update_time }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button plain size="mini" @click="showDetailFn(scope.row.id)">查看编辑</el-button>
            <el-button plain size="mini" @click="detelDetailFn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <div class="height40"></div>
    <addHotFood :visible.sync="addWeekVisible" @InitFn="InitFn" :weekId="weekId"></addHotFood>
    <previewFile :visible.sync="previewVisible" :iframeSrc="iframeSrc"></previewFile>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {hot_food_list, hot_food_delete} from '@/api/admin/food.js'
import standardList from "@/components/standard/standardList";


export default {
  components: {
    standardList
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      addWeekVisible: false,
      editForm: {},
      previewVisible: false,
      iframeSrc: '',
      weekId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      hot_food_list(this.page).then(res=>{
        console.log('res', res)
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.editForm.name = ''
      this.page.pageindex = 1
      this.editForm.start_time = ''
      this.editForm.end_time = ''
      this.addtime = []
      this.InitFn()
    },
    detelDetailFn(id) {
      this.$confirm('确认永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      hot_food_delete({
        id: id,
      }).then(res=>{
        this.InitFn()
      })
    },
    standarFn(type) {
      this.standardvisible = true
      this.standardtype = type
    },
    showFileFn(fileSrc) {
      this.iframeSrc = fileSrc;
      this.previewVisible = true;
    },
    showDetailFn(id) {
      this.weekId = id;
      this.addWeekVisible = true;
    }
  },
  mounted() {
  },
}
</script>

